<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Evil Monkeys vs Tomates Tueuses</title>

<link href="css/redmond/jquery-ui-1.9.2.custom.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet" />
<link href="css/docs.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />

<!-- Chargement js bootstrap -->
<script src="js/jquery/jquery-1.9.1.min.js"></script>
<script src="js/jquery/jquery-ui-1.9.2.custom.js"></script>
<script src="js/bootstrap/bootstrap-modal.js"></script>	
<script src="js/bootstrap/bootstrap-transition.js"></script>	

<!-- Gestion du jeu -->
<script src="js/game/game.js"></script>

<!-- Création de l'affichage du plateau de jeu -->
<script src="js/player/savePseudo.js"></script>

</head>
<body>
	<!-- Gestion de la barre de navigation  -->
	<div id="navbar">
		<div class="navbar navbar-fixed-top">
			<div class="navbar-inner">
				<div class="container" style="width: auto;">
					<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
						<span class="icon-bar"></span> 
						<span class="icon-bar"></span> 
						<span class="icon-bar"></span> 
					</a> 
					<a class="brand">Evil Monkeys vs Tomates Tueuses</a>
					<div class="nav-collapse">
						<ul class="nav">
							<li id="newPartie"><a data-toggle="modal" href="#popupRequestPseudo" onclick="location.reload()">Nouvelle partie</a>
						</ul>
						<ul class="nav pull-center">
							<li class="brand" id="score1"></li>
						</ul>
						<ul class="nav pull-right">
							<li id="regles"><a data-toggle="modal" href="#popupRegles"><img src="css/img/interro.png" style="width:40px;height:40px;margin-top:-10px;margin-bottom:-10px"></a>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div id = "joueur"></div>
	<div id="joueur1">
	</div>

	<div id="joueur2">
	</div>

	<div id="plateau"></div>

	<!-- Popup de la demande de pseudo  -->
	<div id="popupRequestPseudo" class="modal show fade in" style="text-align:center;">
		<div class="modal-header">
			<h3>Saisie des joueurs : </h3>
		</div>
		<div class="modal-body">
			<div class="controls">
				<div id = "login">
					<p> Saisie du joueur 1</p>
					<input type="text" id="nom_joueur1">
					<p> Saisie du joueur 2</p>
					<input type="text" id="nom_joueur2"><br/>
				</div>
				<div id="feedback_popup" class="alert alert-error" hidden="hidden"></div>
			</div>
		</div>
		<div class="modal-footer">
			<input class="btn btn-success" onclick="savePseudo()" data-dismiss="modal" name = "valider" value = "Valider"/>
		</div>
	</div>
	
	
	<!-- popup des règles du jeu  -->
	<div id="popupRegles" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;width:800px;height:500px;margin-left:-25%">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
			<h3>Informations utiles : </h3>
		</div>
		<div class="modal-body">
			<div class="controls">
				<h1> Règles du jeu :</h1>
				<p>La grille de jeu est représentée par une grille de 7 cases en hauteur et de 10 cases en largeur. Le jeu
					se joue à 2 joueurs humains (aucune intelligence artificielle). Chaque joueur représente une équipe.
					Deux équipes s’affrontent : l’équipe des « Evil Monkeys » contre l’équipe des « Tomates Tueuses ».<br/><br/>
					Chaque équipe doit protéger le totem qui a été dérobé à l’équipe adverse. Les tomates tueuses
					protègent le totem « Banane Nucléaire ». Les evil monkeys protègent le totem « Engrais
					Hallucinogène ».<br/><br/>
					Le but du jeu est de récupérer le totem qui a été dérobé. La première équipe qui récupère son totem a
					gagné. Les evil monkeys doivent reprendre le totem « Banane Nucléaire ». Les tomates tueuses
					doivent reprendre le totem « Engrais Hallucinogène ».<br/><br/>
					L'équipe qui débute la partie est désignée de façon aléatoire par le programme.
					<br/><br/>
				</p>
				<h1> Mode de déplacement :</h1>
				<p>Chaque équipe est composée de 5 pions et du totem qu’il protège.
					A tour de rôle, chaque joueur déplace un de ses pions ou le totem qu’il protège.<br/><br/>
					Les pions et les totems peuvent être déplacés dans tous les sens (horizontal, vertical ou diagonal) sur
					la grille de jeu. Les pions ne peuvent se déplacer que d’une seule case à la fois. Les totems peuvent
					être déplacés d’une ou de deux cases à la fois.<br/><br/>
					En revanche, le déplacement des totems est limité. Un joueur ne peut déplacer que 3 fois le totem qu’il
					protège au cours d’une partie.<br/><br/>
					Les pions peuvent être déplacés sur une case vide ou sur une case occupé par un pion de l’adversaire.
					Dans ce dernier cas, le pion de l’adversaire se transforme en pion du joueur et prend l’ancienne place
					du pion du joueur.<br/><br/>
					Les totems ne peuvent être déplacés que sur une case vide.<br/><br/>
					Pour reprendre le totem dérobé, le joueur doit déplacer un de ses pions sur la même case que le
					totem. La partie est alors terminée.<br/><br/>
				</p>
			</div>
		</div>
		<div class="modal-footer">
			<a href="#" class="btn btn-success" data-dismiss="modal">Fermer</a>
		</div>
	</div>

</body>
</html>